import React from 'react'

// Component
import {
  Popover,
} from 'antd-mobile'

// Component
import Card from '../../../components/Card'
import HorizontalBar from '../../../components/Echarts/HorizontalBar'

// Data
import {
  benchmarkingData,
  yAxisLeftData,
  yAxisRightData,
} from '../data'

const Item = Popover.Item

export default class Benchmarking extends React.Component {
  state = {
    benchmarkingData: [],
    yAxisLeftData,
    yAxisRightData,
  }

  componentDidCatch() {
    this.getBenchmarkingData()
    this.getAxisData()
  }

  getBenchmarkingData = () => {
    this.setState({
      benchmarkingData,
    })
  }

  /**
   * 获取坐标值
   */
  getAxisData = () => {
    this.setState({
      yAxisLeftData,
      yAxisRightData,
    })
  }

  render() {
    const {
      benchmarkingData,
      yAxisLeftData,
      yAxisRightData,
    } = this.state

    return (
      <Card
        title='区、县（市）对标'
        extra='项目清单'
        showRight
        showPop
        options={benchmarkingData.map(item => (
          <Item
            key={item.value}
            value={item.value}
          >
            {item.text}
          </Item>
        ))}
      >
        <HorizontalBar
          yAxisLeft={yAxisLeftData}
          yAxisRight={yAxisRightData}
        />
      </Card>
    )
  }
}